<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>异常综合分析</title>
	<script src="../../plugins/vue/vue.min.js"></script>
	<script src="../../plugins/jquery-3.3.1.min.js"></script>	
	<script src="../../plugins/axios/dist/axios.min.js"></script>	
	<!-- 时间控件layDate -->
	<script src="../../plugins/layer-v2.3/layer/laydate/laydate.js"></script>
	<link rel="stylesheet" href="../../plugins/layer-v2.3/layer/laydate/skins/default/laydate.css">
	<!-- 公共重复样式 -->
	<link rel="stylesheet" href="css/reset.css">
	<!-- 自定义样式 -->
	<link rel="stylesheet" href="css/index.css">
	<!-- 字体图标 -->
	<link rel="stylesheet" href="../../plugins/font-awesome-4.7.0/css/font-awesome.css">
	<!-- chosen插件 -->
	<script src="../../plugins/chosen/js/chosen.jquery.js"></script>
	<link rel="stylesheet" href="../../plugins/chosen/css/chosen.css">
	<!-- 多选框组件 -->
	<script src="../../js/components/my-select.js"></script>
	<script src="../../js/components/my-select2.js"></script>
	<!-- dataTables插件 -->
	<script src="../../plugins/dataTables/jquery.dataTables.js"></script>
	<link rel="stylesheet" href="../../plugins/dataTables/css/jquery.dataTables.css">
	<!-- 表格组件 -->
	<script src="components/table-data.js"></script>
	<!-- ajax组件 -->
	<script src="../../js/my-axios.js"></script>
</head>
<body>
	<div id="app">
		<div id="select">
			<div class="select_top">				
			  	<div class="select_item">			  		
				  	<div class="form-group">
			            <label class="font-noraml">统计分类</label>
			            <my-select 
			             v-if="classify.length > 0" 
			             :data-select="classify"
			             :select-id="byRtuModelSel" 
			             :port="time"
			             @linkage="change"/>			           
			        </div>
			    </div>
			    <div class="select_item">
				  	<div class="form-group">
			            <label class="font-noraml">时间</label>
			            <my-select2 :data-select2="A" :select-id="byRtuModelSel_2"/>
			        </div>
			    </div>
			    
                <div class="select_btn">
                	<a href="javascript:;" id="query_derive" class="select_query_btn">
                		<i class="fa fa-search" aria-hidden="true"></i>导出
                	</a>
                	<a href="javascript:;" id="query_btns" class="select_query_btn" @click="getTableData">
                		<i class="fa fa-file-word-o" aria-hidden="true"></i>查询
                	</a>
                </div>
			</div>
			<div class="table-bottom">		
				<div class="curveDiv">
					<h3>EMS</h3>
		            <table-data :op-disk-data="opDiskData.EMS" :table-id="rtuAccTable"/>
		        </div>
		        <div class="curveDiv">
		        	<h3>DMS</h3>
		            <table-data :op-disk-data="opDiskData.DMS" :table-id="rtuAccTable_2"/>
		        </div> 
		    </div>
        </div>
	</div>
</body>
<script>


Vue.prototype.$axiosGet = ajaxGet;
Vue.prototype.$ajaxPost = ajaxPost;
	var app = new Vue({
		el: "#app",
		data:{
			opDiskData:{EMS:[{name:"初始数据",position:88}],DMS:[{name: "DMS",position: "DMSDms"}]},	
			rtuAccTable:"rtuAccTable",
			rtuAccTable_2:"rtuAccTable_2",
			countClassify:'countClassify',
			byRtuModelSel:"byRtuModelSel_11",
			byRtuModelSel_2:'byRtuModelSel_22',
			time:'time',
			classify:[],
			statistics:[//统计
				{title:"电压突降次数"},
				{title:"最大电流突降比例"},
				{title:"电流突升次数"},
				{title:"最大电流突升比例"},
				{title:"电流三相不平衡持续时间"},
				{title:"停电次数,停电频率"},
			],
			val_1:'',
			A:["1:00详细信息","5:00详细信息","12:00详细信息","16:00详细信息","20:00详细信息"],
			B:[],
			startTime: '',
			endTime:''
		},
		created(){
			this.$axiosGet('/countClassify',res=>{
				this.classify = res;
				// console.log(res)
			});
		},
		mounted(){
		},
		methods:{
			getTableData(){
				let url = "./data/01.json";
				let val_1 = $('#byRtuModelSel_chosen > a > span').html();
				let val_2 = $('#byRtuModelSel_1_chosen > a > span').html();
				let _this = this;  //
				this.$http.post(url,{"name1":val_2,"name2":val_2}).then(function(resolve){
					_this.opDiskData = resolve.data;
					// console.log('res',_this.opDiskData)
				}).catch(function(err){
					console.log(err);
				})
			},
			change(value){
				// console.log('value-A',value)
				this.A = value;
			}
		},
		components:{tableData,MySelect,MySelect2}
	})
		
</script>
</html>